<script src="assets/js/go.js"></script>
<script id="code">
    var textArry5={
        id: "1",
        name: "文字控件",
        height: "140",
        data: [
            {key:"onwText", category:"文字一",classifty:"textShape",type:3,color:"#1E9FFF",textColor:"#fff",text:"文字"},
            {key:"twoText", category:"文字二",classifty:"textShape",type:3,color:"#569bd5",textColor:"#fff",text:"文字"},
            {key:"threeText", category:"文字三",classifty:"textShape",type:3,color:"#a9a9e9",textColor:"#fff",text:"文字"}
        ]
    };
    var classifylist=[];

    var bigdata;

    var timer;

    function  flash() {
        //所有模型更改都应该在事务模型中进行
        myDiagram.model.startTransaction("flash");
        for (var data1 of myDiagram.model.nodeDataArray){
            if (data1.select_no !== undefined){
                let name1 = getNameById(data1.select_no);
                let value1 = getValueById(data1.select_no);
                if (data1.select_no === ""){
                    myDiagram.model.setDataProperty(data1, "text",""); // 修改属性
                }else {
                    myDiagram.model.setDataProperty(data1, "text", name1 + "\n" + value1); // 修改属性
                }
            }
        }
        myDiagram.model.commitTransaction("flash");
        timer = setTimeout(function () {
            flash()
        },3000)
    }

    function init() {
        menusList();
        objGo = go.GraphObject.make; // 创建画布
        myDiagram = objGo(go.Diagram, "myDiagramDiv", // 必须命名或引用div html元素
            {
                "ChangedSelection" : onSelectionChanged,
                "initialContentAlignment": go.Spot.Center, // 居中显示
                "allowDrop": true,  // 允许拖拽
                "grid.visible": false,
                "allowHorizontalScroll": true,// 禁止水平拖拽
                "allowVerticalScroll": true,//禁止垂直拖动画布
                "isReadOnly": true, // 只读画布内容
            });

        myDiagram.linkTemplate =
            objGo(go.Link,
                { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
                new go.Binding("points").makeTwoWay(),
                objGo(go.Shape, { isPanelMain: true, stroke: "#1E9FFF", strokeWidth: 6 }),// 线的边
                objGo(go.Shape, { isPanelMain: true, stroke: "#3a77e2", strokeWidth: 4 }), // 线的背景颜色
                objGo(go.Shape, { isPanelMain: true, stroke: "#f5f5f5", strokeWidth: 2, name: "PIPE", strokeDashArray: [10, 10] }), // 中间流动的
                objGo(go.Shape, { toArrow: "Triangle", fill: "#3a77e2", stroke: null }), // 箭头的颜色
            );

        sharedToolTip =
            objGo(go.Adornment, "Auto",
                objGo(go.Shape, "RoundedRectangle", { fill: "lightyellow" }),
                objGo(go.TextBlock, { margin: 2 },
                    new go.Binding("text",  "" , function(d) { return d.category; })));

        nodeResizeAdornmentTemplate =
            objGo(go.Adornment, "Spot",
                { locationSpot: go.Spot.Right },
                objGo(go.Placeholder),
                objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),

                objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),

                objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" })
            );

        nodeRotateAdornmentTemplate =
            objGo(go.Adornment,
                { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
                objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "deepskyblue" }),
                objGo(go.Shape, { geometryString: "M4.2 8 L4.2 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.0, strokeDashArray: [4, 2] })
            );

        // 根据数据定义菜单分类
        paletteArry=[]

        for(var item of classifylist){
            let contentDataImg={};
            contentDataImg.paletteDefine=new go.Palette("classify-"+item.id);
            contentDataImg.id=item.id;
            contentDataImg.data=item.data;
            for(var itemm of item.data){ // 每个分类里的图片
                var node;
                if(itemm.classifty=="img"){

                    node =objGo(go.Node, "Spot", nodeStyle(),
                        objGo(go.Panel, "Auto",
                            { name: "PANEL" },
                            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                            objGo(go.Shape, "Rectangle",  // default figure
                                {
                                    portId: "",
                                    fromLinkable: true, margin:0,toLinkable: true, cursor: "pointer",
                                    fill: "rgba(70,113,196,0)",  // default color
                                    strokeWidth: 0
                                },
                            ),
                            objGo(go.Picture,
                                { width:itemm.width-5,height:itemm.height-5},
                                new go.Binding("source"),
                                new go.Binding("width"),
                                new go.Binding("height"),
                            ),
                            objGo(go.TextBlock,
                                {
                                    font: "Bold 14px Lato, sans-serif",
                                    alignment: go.Spot.TopCenter,alignmentFocus: go.Spot.BottomCenter,
                                    textAlign: "center", margin: 4,
                                    maxSize: new go.Size(100, NaN),
                                    text:""
                                },
                                new go.Binding("text"))
                        ),
                        makePort("top", go.Spot.Top, true, true),
                        makePort("left", go.Spot.Left, true, true),
                        makePort("right", go.Spot.Right, true, true),
                        makePort("botton", go.Spot.Bottom, true, true),
                        {
                            mouseEnter: function(e, node) { showSmallPorts(node, true); },
                            mouseLeave: function(e, node) { showSmallPorts(node, false); }
                        }
                    );
                } else if(itemm.classifty=="shape"){
                    node =objGo(go.Node, "Spot", nodeStyle(),
                        objGo(go.Shape, "Rectangle",
                            { strokeWidth:1, fill: "#8fbdee"},
                            new go.Binding("figure")),
                        makePort("top", go.Spot.Top, true, true),
                        makePort("left", go.Spot.Left, true, true),
                        makePort("right", go.Spot.Right, true, true),
                        makePort("botton", go.Spot.Bottom, true, true),
                        {
                            mouseEnter: function(e, node) { showSmallPorts(node, true); },
                            mouseLeave: function(e, node) { showSmallPorts(node, false); }
                        }
                    );
                } else if(itemm.classifty=="textBlock"){
                    node = objGo(go.Node, "Spot",nodeStyle(),
                        objGo(go.TextBlock,
                            {
                                font: "normal 11pt Helvetica, Arial, sans-serif",
                                margin: 8,
                                maxSize: new go.Size(160, NaN),
                                editable: true,stroke:"#0A7EF7",
                            },
                            new go.Binding("text").makeTwoWay(),
                            new go.Binding("stroke","color"),
                        )
                    );
                } else if(itemm.classifty=="textShape"&&itemm.type==4){
                    node=objGo(go.Node, "Horizontal",nodeStyleNo(),
                        { background: "#c1c4ee" },
                        objGo(go.TextBlock,
                            // 文字周围的空隙, 大号字体, 白色笔画:
                            {
                                font: "normal 11pt Helvetica, Arial, sans-serif",
                                margin: 6,
                                maxSize: new go.Size(160, 25),
                                wrap: go.TextBlock.WrapFit,
                                editable: true,
                                stroke:itemm.textColor,
                            },
                            new go.Binding("text").makeTwoWay()),
                        objGo(go.Panel, "Auto",
                            objGo(go.Shape, "Rectangle",
                                {
                                    fill:"#1E9FFF",  // default color
                                    width:60,
                                    height:30,
                                    strokeWidth:0,
                                },
                            ),
                            objGo(go.TextBlock,
                                {
                                    font: "normal 11pt Helvetica, Arial, sans-serif",
                                    margin: 8,
                                    editable: true,
                                    text:"生效",
                                    stroke:"#fff"
                                },
                            ),
                        ),

                        new go.Binding("strokeWidth"),
                    );
                } else if(itemm.classifty=="textShape"){
                    node=objGo(go.Node, "Spot",nodeStyle(),
                        objGo(go.Panel, "Auto",
                            { name: "PANEL" },
                            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                            objGo(go.Shape, "Rectangle",
                                {
                                    fill: itemm.color,  // default color
                                    strokeWidth: 0,
                                },
                                new go.Binding("strokeWidth"),
                            ),
                            objGo(go.TextBlock,
                                {
                                    font: "normal 11pt Helvetica, Arial, sans-serif",
                                    margin: 8,
                                    maxSize: new go.Size(160, NaN),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: true,
                                    stroke:itemm.textColor,
                                },
                                new go.Binding("stroke"),
                                new go.Binding("text").makeTwoWay())
                        ),
                    );
                }
                myDiagram.nodeTemplateMap.add(itemm.category, node);
            }
            paletteArry.push(contentDataImg);
        }
        for(var itemList of paletteArry){
            itemList.paletteDefine.nodeTemplateMap = myDiagram.nodeTemplateMap;
            var nodeDataList=[];
            for(var itemChart of itemList.data){
                if(itemChart.key.indexOf('开关')>=0){
                    nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src,'text':''})
                }
                else if(itemChart.classifty=="img"){
                    nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src})
                } else if(itemChart.classifty=="shape"){
                    nodeDataList.push( {key:itemChart.key,category:itemChart.category, figure: itemChart.figure})
                } else if(itemChart.classifty=="textBlock"){
                    nodeDataList.push({key:itemChart.key,category: itemChart.category})
                } else if(itemChart.classifty=="textShape"){
                    nodeDataList.push({key:itemChart.key,category: itemChart.category ,text: itemChart.text})
                }
            }
            itemList.paletteDefine.model.nodeDataArray = nodeDataList
        }
        setTimeout(function(){
            for(var itemList of paletteArry){
                $("#classify-"+itemList.id).css('display',"none")
            }
        },100)

        load();
        flash();

    }
    //菜单
    function menusList(){
        var menusHtml=''

        for(var item of classifylist){

            menusHtml =' <div class="classify-title" onclick="classifyShow('+item.id+')">'+item.name+'</div>'
                +'<div id="classify-'+item.id+'" class="classify-title-content" style="height: '+item.height+'px" ></div>'
            $("#myPaletteDiv").append(menusHtml);

        }
    }
    // 菜单显示内容
    function classifyShow(showId){
        if( $("#classify-"+showId).css('display')=="block"){
            $("#classify-"+showId).css('display',"none");
            $(".classify-"+showId).css('display',"none");
        } else{
            $(".classify-title-content").css('display',"none")
            $("#classify-"+showId).css('display',"block");
            $(".classify-"+showId).css('display',"block");
        }
    }
    // 组件样式定义
    function nodeStyle() {
        return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
            { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
            new go.Binding("angle").makeTwoWay(),
            new go.Binding("isShadowed", "isSelected").ofObject(),
            {
                selectionAdorned: false,
                shadowOffset: new go.Point(0, 0),
                shadowBlur: 15,
                shadowColor: "#00a9c9",
                toolTip: sharedToolTip
            }];
    }
    function nodeStyleNo() {
        return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
            new go.Binding("angle").makeTwoWay(),
            new go.Binding("isShadowed", "isSelected").ofObject(),
            {
                selectionAdorned: false,
                shadowOffset: new go.Point(0, 0),
                shadowBlur: 15,
                shadowColor: "#00a9c9",
                toolTip: sharedToolTip
            }];
    }
    function showSmallPorts(node, show) {
        node.ports.each(function(port) {
            if (port.portId !== "") {  // don't change the default port, which is the big shape
                port.fill = show ? "rgba(58,160,255,1)" : null;
            }
        });
    }

    // 默认连线的链接位置
    function makePort(name, spot, output, input) {
        let makePortWidth=10;
        var shapeStr = "";
        switch (name){
            case "top":shapeStr = "TriangleUp";break;
            case "right":shapeStr = "TriangleRight";break;
            case "botton":shapeStr = "TriangleDown";break;
            case "left":shapeStr = "TriangleLeft";break;
        }

        return objGo(go.Shape, shapeStr,
            {
                fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
                stroke: null,
                strokeWidth:0,
                desiredSize: new go.Size(makePortWidth, makePortWidth),
                alignment: spot,  // align the port on the main Shape
                alignmentFocus: spot,  // just inside the Shape
                portId: name,  // declare this object to be a "port"
                fromSpot: spot,  // declare where links may connect at this port
                fromLinkable: output,  // declare whether the user may draw links from here
                toSpot: spot,  // declare where links may connect at this port
                toLinkable: input,  // declare whether the user may draw links to here
                cursor: "pointer"  // show a different cursor to indicate potential link point
            });
    }

    function onSelectionChanged(e) {
        $('#collectValue').val('');
        $('#conponentName').val('');
        var node = e.diagram.selection.first();
        if (node instanceof go.Node) {
            let data = node.data;

            if (data === null) {
                document.getElementById("propertiesPanel").style.display = "none";
            } else {
                document.getElementById("propertiesPanel").style.display = "block";
                $('#selectLocal').val(data['work_id']);
                $('#conponentType').val(data['select_type']);
                $('#conponentNo').val(data['select_no']);
                getName();
                getValue();
            }
        }
    }

    //RotatingTool用于通过设置GraphObject.angle属性以交互方式更改GraphObject的GraphObject.angle。
    function TopRotatingTool() {
        go.RotatingTool.call(this);
    }

    go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

    TopRotatingTool.prototype.updateAdornments = function (part) {
        go.RotatingTool.prototype.updateAdornments.call(this, part);
        var adornment = part.findAdornment("Rotating");
        if (adornment !== null) {
            adornment.location = part.rotateObject
                .getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top
        }
    };

    TopRotatingTool.prototype.rotate = function (newangle) {
        go.RotatingTool.prototype.rotate.call(this, newangle + 90);
    };

    // 设置线动态效果
    function flowLine(){
        var diagram = myDiagram;
        setTimeout(function() {
            var oldskips = diagram.skipsUndoManager;
            diagram.skipsUndoManager = true;
            diagram.links.each(function(link) {
                var shape = link.findObject("PIPE");
                var off = shape.strokeDashOffset - 2;
                shape.strokeDashOffset = (off <= 0) ? 20 : off;
            });
            diagram.skipsUndoManager = oldskips;
            flowLine();
        }, 200);
    }
    // // 查看页面实现图片动态效果
    let gifPictureArray=[];
    function flowPictureGif(allPictureData){
        // 获取页面动态的地址
        var canvasHtml='';
        $("#canvasDiv").html('');
        for(var item of allPictureData){
            if(item.source&&item.source.substr(item.source.length-3)=='gif'){ // 判断是否是动图
                $("#canvasDiv").append('<canvas id="myCanvas'+item.key+'"></canvas>');
                let canvasContentDiv=document.getElementById('myCanvas'+item.key);
                let canvasContent= canvasContentDiv.getContext('2d');
                item.canvasDiv=canvasContentDiv;
                item.canvasContent=canvasContent;
                gifPictureArray.push(item);
            }
        }
        if(gifPictureArray.length>0){ // 界面中有动图
            // 把动图分割，取出每帧的效果
            for(var i=0;i<gifPictureArray.length;i++){
                splitGifImg(i);
            }
        }
    }
    // 分割取出每个帧的图片内容
    var countGif=0; // 用于判断所有gif是否分割完毕
    function splitGifImg(indexNum){
        var oReq = new XMLHttpRequest();
        //var dd=gifPictureArray[indexNum].source.split('https://www.hiwooiotdev.top')[1];
        // var urlImg='http://192.168.0.103:90'+dd;
        oReq.open("GET", gifPictureArray[indexNum].source, true);
        //oReq.open("GET", urlImg, true);
        oReq.responseType = "arraybuffer";
        oReq.onload = function (oEvent) {
            var arrayBuffer = oReq.response;
            if (arrayBuffer) {
                gif = new GIF(arrayBuffer);
                loadedFrames = gif.decompressFrames(true); // 各帧内容
                gifPictureArray[indexNum].loadedFrames=loadedFrames;
                gifPictureArray[indexNum].numberLength=loadedFrames.length;
                gifPictureArray[indexNum].frameIndex=0;
                countGif+=1;
                if(countGif==gifPictureArray.length){ // 每张图片的各帧已经取出完毕
                    gifRotate();// 控制gif图片自动旋转
                }
            }
        };
        oReq.send(null);
    }
    // gif图片自动旋转的方法
    function gifRotate(){
        for(var i=0;i<gifPictureArray.length;i++){  // 开始每张动图的旋转
            renderFrame(gifPictureArray[i])
        }
    }
    function renderFrame(gifPicture){
        // get the frame
        var frame = gifPicture.loadedFrames[gifPicture.frameIndex];
        var start = new Date().getTime();
        if(!frame.base64){ // 字节流还没转为bae64
            if(!gifPicture.width){
                gifPicture.width=80;
                gifPicture.height=parseInt((frame.dims.height*80)/frame.dims.width)
            }
            gifPicture.canvasContent.clearRect(0,0,gifPicture.canvasDiv.width,gifPicture.canvasDiv.height);
            if(frame.dims.height!=gifPicture.canvasDiv.height){
                gifPicture.canvasDiv.width = parseInt(frame.dims.width);
                gifPicture.canvasDiv.height = parseInt(frame.dims.height);
            }
            var frameImageData = gifPicture.canvasContent.createImageData(frame.dims.width, frame.dims.height);
            frameImageData.data.set(frame.patch);
            gifPicture.canvasContent.putImageData(frameImageData,0,0);
            var image=new Image();
            image.src=gifPicture.canvasDiv.toDataURL();
            gifPicture.loadedFrames[gifPicture.frameIndex].base64=image.src
        }
        let nodeData = myDiagram.model.findNodeDataForKey(gifPicture.key);
        nodeData.source=frame.base64;
        nodeData.width=gifPicture.width;
        nodeData.height=gifPicture.height;
        myDiagram.model.updateTargetBindings(nodeData);
        gifPicture.frameIndex+=1;
        if(gifPicture.frameIndex >= gifPicture.numberLength){
            gifPicture.frameIndex = 0;
        }
        var end = new Date().getTime();
        var diff = end - start;
        setTimeout(function(){
            requestAnimationFrame(function(){renderFrame(gifPicture)});
            //renderFrame();
        }, Math.max(0, Math.floor(frame.delay - diff)));
    }

    var contentData ={};

    function load(){
        myDiagram.model = go.Model.fromJson(contentData);
        flowPictureGif(contentData.nodeDataArray);
        flowLine();
        loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
    }

    function ConponentListInit(res){
        let ii = 2;
        classifylist.splice(0,classifylist.length);
        classifylist.push(textArry5);
        res.rows.forEach(function (e){
            let i = 0;
            classifylist.forEach(function (j,index,arr){
                if (e.type === j.name){
                    i++;
                    let d = {
                        src: e.data,
                        classifty:'img',
                        category:e.label,
                        type:2,
                        key:e.id.toString(),
                        width:80,
                        height:80
                    }
                    classifylist[index].data.push(d);
                }
            })
            if (i === 0){
                let classifyeme = {
                    id: (ii++).toString(),
                    name: e.type,
                    height: "300",
                    data:[{
                        src: e.data,
                        classifty:'img',
                        category:e.label,
                        type:2,
                        key:e.id.toString(),
                        width:80,
                        height:80
                    }]
                }
                classifylist.push(classifyeme);
            }
        })
    }

    //获取控件栏
    $.ajax({
        type: 'get',
        url: '/component/select',
        data: {
			'cname':label_water_bala_companyName
		},
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        success: function (res) {
            ConponentListInit(res);
        },
    });

    //获取图表模板
    $.ajax({
        type:'get',
        url:'/wbalchart/selectOne',
        data:{
            'id': flowchartCheckId
        },
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        success: function (res) {
            contentData = JSON.parse(res.result.data);
            $("#flowchart_name").val(res.result.chartName);
        }
    })

    $.ajax({
        type: 'get',
        url: "/chart/selectSensor",
        data: {
            companyId: label_entity_water_bala_companyID,
        },
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            bigdata = data; //这里面存的是所有的设备编号和属性信息
            /*for(var i=0;i<data.results.length;i++){
                $("#select_id").append("<option value='"+data.results[i].名称+"'>"+data.results[i].名称+"</option>");
            }*/
        },
        error: function () {
            bootoast({
                message: '失败',
                position: 'top',
                type: 'danger',
                timeout: 1.5,
            });
        }
    })

    init();// 初始化组件内容

    /**
     * 获取选择设备编号对应设备的最新值
     */
    function getValue() {
        if($('#conponentNo').val() && $('#conponentNo').val().length !== 0) {
            $.ajax({
                type: 'get',
                url: '/entity_water/query_new_value_by_sensor_row_id',
                data: {
                    'businessId': label_entity_water_bala_companyID,
                    'sensorRowId': $("#conponentNo").val(),
                },
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (res) {

                    let data = res.data
                    $('#collectValue').val(data)
                },
            });

            // setTimeout("getValue()", 2000)
        }
    }

    /**
     * 获取选择设备编号对应设备的名称
     */
    function getName(){
        if($('#conponentNo').val() && $('#conponentNo').val().length !== 0){
            $.ajax({
                type: 'get',
                url: '/chart/selectOneName',
                data: {
                    'businessId': label_entity_water_bala_companyID,
                    'sensorRowId': $("#conponentNo").val(),
                },
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    $('#conponentName').val(res.name)
                },
                error: function () {
                    bootoast({
                        message: '失败',
                        position: 'top',
                        type: 'danger',
                        timeout: 1.5,
                    });
                }
            });
        }
    }

    var value2
    /**
     * 获取选择设备编号对应设备的最新值
     */
    function getValueById(sensorId) {
        $.ajax({
            type: 'get',
            url: '/entity_water/query_new_value_by_sensor_row_id',
            data: {
                'businessId': label_entity_water_bala_companyID,
                'sensorRowId': sensorId,
            },
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                value2 = res.data;
            },
        });
        return value2
    }

    var name2
    /**
     * 获取选择设备编号对应设备的名称
     */
    function getNameById(sensorId){
        $.ajax({
            type: 'get',
            url: '/chart/selectOneName',
            data: {
                'businessId': label_entity_water_bala_companyID,
                'sensorRowId': sensorId,
            },
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                name2 = res.name
            },
        });
        return name2
    }

    function loadDiagramProperties(e) {
        // 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
        var pos = myDiagram.model.modelData.position;
        if (pos)
            myDiagram.initialPosition = go.Point.parse(pos);
    }

    $("#btn_out").click(function() {
        clearInterval(timer);
        $('#page-wrapper').load('pages/label_eva_wbal_chart.html');
    });

</script>


<div id="sample" >
    <div class="input-group"
         style="margin: 10px 10px 20px; width: 250px;position: absolute">
        <span class="input-group-addon">流程图名称</span> <input type="text" readOnly="true"
                                                            id="flowchart_name" class="form-control">
    </div>
    <div id="toolbar" class="btn-group" style="margin: 10px 300px 20px">
        <button id="btn_out" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-log-out"
                  aria-hidden="true"></span>退出
        </button>
    </div>

    <div style="width: 100%; white-space: nowrap;">
		<span style="display: none; vertical-align: top; width: 150px">
			<div id="myPaletteDiv" style="border: solid 1px black; height: 800px"></div>
		</span>
        <span style="display: inline-block; vertical-align: top; width: 82%">
			<div id="myDiagramDiv" style="border: solid 1px black; height: 800px"></div>
		</span>
        <span
                style="display: inline-block; vertical-align: top; width: 250px">
			<div id="propertiesPanel"
                 style="display: none; padding: 10px 10px 10px; width: 280px">
				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">所在位置</span>
						  <label for="selectLocal"></label><input id="selectLocal" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备类型</span>
							<label for="conponentType"></label><input id="conponentType" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备编号</span>
					<label for="conponentNo"></label><input id="conponentNo" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备名称</span>
					<label for="conponentName"></label><input id="conponentName" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">采集数值</span>
						  <label for="collectValue"></label><input id="collectValue" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

                <!-- <div class="input-group" style="margin:10px 10px 10px">
                <form id="form" class="bs-example bs-example-form" role="form">

                </form>
                </div> -->
		    </div>
		</span>


    </div>
    <div>
		<textarea id="mySavedModel"
                  style="width: 100%; height: 300px; display: none">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
 ],
  "linkDataArray": [
 ]}
    </textarea>
    </div>
    <div style="display: none" id="canvasDiv"></div>
</div>